<script setup>
import { projectRoute } from '@/router/projectRoute/projectRoute'
let projectOneRoute = computed(() => projectRoute.filter((item, index) => index != 0))
// 动态图片映射
const imageMap = {
    '单屏滚动页面': new URL('./assets/testpage.jpg', import.meta.url).href,
    '滚动视差页面': new URL('./assets/testpage.jpg', import.meta.url).href,
    '滚动动画页面': new URL('./assets/testpage.jpg', import.meta.url).href,
    '无限拖曳页面': new URL('./assets/testpage.jpg', import.meta.url).href,
}

const getImageUrl = (name) => {
    return imageMap[name] || new URL('./assets/testpage.jpg', import.meta.url).href
}
</script>
<template>
    <div class="pages-main">
        <h1 class="title">主页页面</h1>
        <div class="pages">
            <div class="page" v-for="(value, index) in projectOneRoute" :key="index">
                <a :href="value.path" target="_blank">
                    <img :src="getImageUrl(value.name)">
                </a>
                <p>{{ value.name }}</p>
            </div>
        </div>
        <h1 class="title">表单页面</h1>
        <div class="pages"></div>
    </div>
</template>

<style lang="scss" scoped>
.pages-main {
    padding: 50px;
    text-align: center;

    .title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .pages {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;

        .page {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 20%;
            height: 33.3%;

            a {
                display: block;
                width: 80%;
                height: auto;
                border-radius: 8px;
                overflow: hidden;
                margin-bottom: 20px;
                transition: all 0.3s;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                &:hover {
                    transform: scale(1.1);
                }
            }

            @media(max-width: 820px) {
                width: 50%;
            }

        }
    }
}
</style>